<template >
    <Page class="basic company">
        <template #header>
            <HousePicker class="mr-2" multiple ref="housePicker" v-model="params.rooms" @input="houseInput"/>
            <!-- <el-input v-model="params.roomCode" placeholder="请输入房间号" /> -->
            <el-input v-model="params.borrowerPhone" placeholder="请输入联系电话"/>
            <el-input v-model="params.toolName" placeholder="请输入工具名称"/>
            <EdSelect  :selectParams="statusParams" v-model="params.status"></EdSelect>
            <el-date-picker
                v-model="pickerTime"
                type="daterange"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="resetInfo()" ><svg-icon icon-class="reset-svg"/>重置</el-button>
           <el-button class="ed-button ed_black-bottom ed-button36" v-has="'property:toolRent:enter'" style="margin-left:20%" @click="enterEent()"><svg-icon icon-class="add-svg" />录入</el-button>

        </template>
        <ApiTable :api="tableApi" ref="table" :params="params">
            <el-table-column type="index" width="80" label="序号"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="villageName" label="所属项目"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="address" label="房号"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="borrowerName" label="借用人"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="borrowerPhone" label="联系电话"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="toolName" label="工具名称"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="borrowQuantity" label="借用数量"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="returnTime" label="归还时间"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="status" label="状态">
                <template slot-scope="scope">
                    <div><span :class="['spanLabel spanLabelWidth marginRight8', 'spanLabelColor'+scope.row.status]"></span>{{returnName(scope.row['status'], statusParams.options) || scope.row['status'] || '-'}}</div>
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="操作" >
                <template slot-scope="scope">
                    <el-button class="ed-table-bottom ed_blue_border" :disabled="scope.row.status==1" @click="giveBack(scope.row)" v-has="'property:toolRent:returnBack'">归还</el-button>
                    <!-- <el-button class="ed-table-bottom ed_delete_border" @click="del(scope.row)" v-has="'basic:household:delete'" :disabled="scope.row.residentStatus==0 && scope.row.identity==0">删除</el-button> -->
                </template>
            </el-table-column>
        </ApiTable>
        <EdDialog ref="dialogRef" title="录入"  v-if="showdialog"  @close-dialog="closeDialog" @save-dialog="saveDialog">
            <el-form :model="editForm"  ref="ruleForm" label-position='right' label-width="auto">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="房号" prop="roomId">
                            <!-- <el-input v-model="editForm.devicePlace"></el-input> -->
                            <EdLazyCascader style="width:100%" ref="edLazyCascader" :houseRentParams="houseRentParams" placeholder="小区/分期/楼栋/单元/房间" leafLevel="4" @emit-cascader-value="emitCascaderValue"></EdLazyCascader>
                            <!-- <HousePicker class="mr-2" ref="housePicker" v-model="editForm.rooms"/> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="借用人" prop="borrowerName" :rules="$validate.validates({required:true,msg:'请输入借用人'})" >
                        <el-input v-model="editForm.borrowerName" placeholder="清输入"></el-input>
                            <!-- <EdSelect v-model="editForm.deviceId" ref="selectpatrol" :selectParams="deviceNameParams"  style="width:100%"></EdSelect> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="联系电话" prop="borrowerPhone" :rules="$validate.validates({required:true,msg:'请输入联系电话',type:'tel'})" >
                            <el-input v-model="editForm.borrowerPhone" placeholder="清输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="工具名称" prop="toolId" :rules="$validate.validates({required:true,msg:'请选择工具名称'})" >
                        <EdSelect v-model="editForm.toolId" ref="selectpatrol" :selectParams="toolNameParams" placeholder="请选择" style="width:100%" @emit-select-value="projectChange" ></EdSelect>
                            <!-- <el-select v-model="editForm.toolId" filterable placeholder="请选择" style="width:100%" @change="toolChange">
                                <el-option v-for="item in rentOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="借用数量" prop="borrowQuantity">
                            <el-input-number :disabled="max == 0" v-model="editForm.borrowQuantity" @change="handleChange" :min="0" :max="max" ></el-input-number>
                            <!-- <EdSelect v-model="editForm.deviceType" :selectParams="deviceTypeParams" style="width:100%" :formatter="setDeviceType"></EdSelect> -->
                        </el-form-item>
                        <span v-if="max == 0" style="color: #F56C6C;margin-top: 5px;transform: translateX(-60px);">该工具暂不可借用</span>
                    </el-col>
                </el-row>  
            </el-form>
        </EdDialog>
    </Page> 
     
</template>
<script>
import Page from 'src/views/components/Page.vue';
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import EdLazyCascader from 'src/components/EdLazyCascader.vue'
import HousePicker from 'src/components/HousePicker/index.vue'
import * as api from "../api";
import { defineComponent } from 'vue'
import { returnName } from "src/utils/common.js";
import EdDialog from 'src/components/EdDialog.vue'
export default defineComponent({
    name: 'toolRent',
    components: { Page,PageCard, ApiTable, EdSelect,HousePicker,EdDialog,EdLazyCascader},
    data() {
        return {
            params: {
                rooms: undefined,
                borrowerPhone:'',
                toolName:'',
                status:'',
                startTime:"",
                endTime:'',
            },
            statusParams:{
                 options: [
                    {label:'借用中',value:'0'},
                    {label:'已归还',value:'1'}
                 ],
                placeholder:"请选择状态"
            },
            pickerTime: [],
            showdialog:false,
            editForm:{
                roomId:'',
                borrowerName:'',
                borrowerPhone:"",
                toolId:'',
                toolName:'',
                borrowQuantity:1,
                orgId:this.$store.getters.vid,
                villageId:'',
                villageName:'',
            },
            toolNameParams:{
                options:[],
                props:{label:'toolName',value:'toolId'},
            },
            value: '',
            max : 10,
            houseRentParams:{
                options: [],
            },
            roomId:[]
        }
    },
    created() {

    },
    activated(){
        this.$refs.table.load()
    },
    deactivated(){
        this.editForm={}
        // this.$refs.housePicker.reset();
        // this.$refs.edLazyCascader.reset();
    },
    watch:{
        pickerTime: {
            deep: true,
            immediate: true,
            handler(newVal, oldVal) {
                if(newVal && newVal.length > 0) {
                    this.params.startTime = newVal[0]
                    this.params.endTime = newVal[1]
                }
            }
        },
    },
    methods: {
        tableApi:api.toolRentList,
        search(){
            this.$refs.table.load(1)
        },
        resetInfo(){
            this.pickerTime=[]
            this.params = {
                borrowerPhone:'',
                toolName:'',
                status:'',
                startTime:"",
                endTime:'',
                rooms: undefined
            };
            this.$refs.housePicker.reset()
            this.$nextTick(()=>{
                this.$refs.table.load(1,10)
                })
        },
        initDic(){
            api.toolManageList({page:1,pageSize:999999}).then(response => {
                if(response.success) {
                    // let options = response.data.records.map(x=>{return {label:x.villageName,value:x.villageId}})
                   this.toolNameParams.options = response.data.records.map(x=>{return {toolName:x.toolName,toolId:x.id,residualQuantity:x.residualQuantity}})
                }
            })
        },
        enterEent(){
            this.showdialog = true
            this.initDic()
        },
        closeDialog(){
            // 用dialog的组件一定要这么写，要不然下次点击的时候不弹框
            this.showdialog = false
            this.$refs.ruleForm.resetFields()
        },
        saveDialog(){
            this.$refs.ruleForm.validate((valid)=>{
                if(!valid){
                    this.$refs.dialogRef.loading  = false
                    return
                }
              this.toolNameParams.options.forEach((v, i)=>{
                    if(this.editForm.toolId==v.toolId){
                        this.editForm.toolName=v.toolName
                    }
                })
                this.editForm.roomId = this.roomId[0]
                api.addToolRentList(this.editForm).then(res=>{
                    if(res.success){
                        this.$message.success({
                            message: '录入借用成功！',
                            duration: 2000,
                            center:true
                        })
                        this.showdialog = false
                        this.$refs.table.load()
                        this.$refs.edLazyCascader.reset();
                        this.$refs.dialogRef.loading  = false
                        this.$refs['ruleForm'].resetFields()
                    }
                }).catch(res=>{
                    this.$refs.dialogRef.loading  = false
                })
            })
        },
        handleChange(value){
            console.log(value);
        },
        projectChange(row){
            // console.log(row);
            // console.log(this.toolNameParams.options);
           let options = this.toolNameParams.options.find(x => {
                // console.log(row);
                // console.log(x.toolId);
                // console.log(x.toolId == row);
                return x.toolId == row
           })
           console.log(options);
           this.max =  options ? options.residualQuantity : ''
           if(this.max == 0){
                this.editForm.borrowQuantity = 0
           }
           this.editForm.toolName = options.toolName
        },
        // getresidentsByRoomId(roomId){
        //     api.getresidentsByRoomId(roomId).then(res => {
        //         if(res.success == true) {
        //             this.houseRentParams.options = res.data;
        //         }
        //     })
        // },
        emitCascaderValue(data){
            let arr = [];
            arr.push(data&&data[data.length-1]);
            this.roomId = arr;
            // this.form.ownerId = '';
            // if(data.length) this.getresidentsByRoomId(data[data.length-1]);
        },
        // 归还接口联调
        giveBack(row){
            api.giveBack({id:row.id}).then(res=>{
                if(res.success){
                    this.$message.success({
                        message: '工具归还成功！',
                        duration: 2000,
                        center:true
                    })
                    this.$refs.table.load()
                }else {
                    this.$message.success({
                        message: '工具归还失败！',
                        duration: 2000,
                        center:true
                    })
                    this.$refs.table.load()
                }
            })
        },
        returnName(val, options, value, label){
            return returnName(val, options, value, label)
        },
        houseInput(data){
            console.log('=====',data);
        }
    }

})
</script>
<style lang="scss" scoped>
        .spanLabel{
        width: 8px;height: 8px;border-radius: 50%;display: inline-block;vertical-align: 1px
    }
    .spanLabelWidth{
        width: 6px;height: 6px;
    }
    .titleTop{
        border: 1px solid rgba(0, 0, 0, 0.65);width: 14px;height: 14px;line-height: 14px;
        border-radius: 50%;font-size: 12px;text-align: center;display: inline-block;vertical-align: 1px;margin-left: 4px;
    }

    // .titleTopBorderColor1{
    //     border-color: rgba(0, 0, 0, 0.65);
    // }
    // .titleTopBorderColor2{
    //     border-color: #FAAD14;
    // }
    // .titleTopBorderColor3{
    //     border-color: #52C41A;
    // }
    // .titleTopBorderColor4{
    //     border-color: #1890FF;
    // }
    // .titleTopBorderColor5{
    //     border-color: #B7B7B7;
    // }
    .spanLabelColor1{
        background-color: #414448 !important;
    }
    // 借用中列表小圆点的颜色
    .spanLabelColor0{
        background-color: #EED096 !important;
    }
    // .spanLabelColor2{
    //     background-color: #414448 !important;
    // }
    // .colorMain{
    //     color: #DDB15C !important;
    // }
</style>